<template>
    <div class="primary">
        <PersonalHeader :content="2"></PersonalHeader>

        <section class="primarymain">
            <section class="type">
                <h2 class="title">{{$t('userRz[1]')}} 
                    <p>{{$t('userRz[0]')}}</p>
                </h2>
                <ul class="contt">
                    <el-form label-position="top" label-width="80px" :model="formLabelAlign" :rules="rules" ref="ruleForm" prop="name">
                        <el-form-item :label="$t('userCj[0]')">
                            <el-input v-model="formLabelAlign.name" :placeholder="$t('userCj[1]')"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('userCj[2]')" prop="card_id">
                            <el-input v-model="formLabelAlign.card_id" :placeholder="$t('userCj[3]')"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleSubmit" :loading="loading">{{$t('userCj[4]')}}</el-button>
                        </el-form-item>
                    </el-form>
                </ul>
            </section>
        </section>
    </div>
</template>

<script>
import { primaryCertification } from '@/api/authentication'
import PersonalHeader from "_dom/personalheader";
import { setToken } from "@/libs/util";
export default {
    name: 'primary',
        data () {
            var validatePass1 = (rule, value, callback) => {
                if (!value) {
                    callback(new Error(this.$t('userCj[5]')));
                } else {
                    callback();
                };
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error(this.$t('userCj[6]')));
                } else if (this.$public.isCardID(value)) {
                    callback();
                } else {
                    callback(new Error(this.$t('userCj[7]')));
                }
            };
            return {
                formLabelAlign:{
                    name:"",
                    card_id:"",
                },
                loading: false,
                rules: {
                    name: [
                        { validator: validatePass1, trigger: 'blur' }
                    ],
                    card_id: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                },
            }
        },
        methods: {
            handleSubmit(){//用户充币明细
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        primaryCertification(this.formLabelAlign).then(res => {
                           
                            
                                this.$message({
                                    message: this.$t('userCj[8]'),
                                    type: 'success'
                                });
                                setTimeout(() => {
                                    this.$router.push({ path:"/authentication" });
                                }, 800);
                            
                        }).catch(err => {
                        }).finally(()=>{
                             this.loading = false;
                        });
                    }
                })
            }
        },
        created(){

        },
        components: {
            PersonalHeader
        },
    }
</script>

